<template>
  <div style="width: auto;float:left;margin-right: 20px;cursor:pointer;">
    <div
      @click="clickMenu"
      :class="[menu.checked === true ? 'menu_active' : 'menu_normal']"
      :style="{ backgroundColor: menu.checked ? sysTheme : '' }"
    >
      <el-badge
        :value="menu.count"
        class="menu_badge"
        type="danger"
        :max="99"
        v-if="!menu.checked && menu.count > 0"
      >
        <span>{{ menu.menuName }}</span>
      </el-badge>
      <span v-else>{{ menu.menuName }}</span>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";

export default {
  name: "subMenu",
  props: {
    menu: Object,
    subItemTitleStyle: {
      type: String,
      default: "font-size: 16x;"
    },
    iconStyle: {
      type: String,
      default: "font-size: 16px;"
    },
    subTitleStyle: {
      type: String,
      default: "font-size: 16px;"
    }
  },
  created() {},
  updated() {
    this.Refresh();
  },
  data() {
    return {
      noticeCount: 10,
      menuChecked: this.menu.checked,
      leftFirstMenu: {}
    };
  },
  computed: {
    ...mapGetters({
      sysTheme: "sysTheme",
      userMenus: "userMenus"
    })
  },
  methods: {
    Refresh() {
      this.userMenus.map(item => {
        if (item.menuName == this.$route.matched[1].meta.title) {
          console.log(1)
          this.$store.dispatch("updateOneTopMenu", item);
        }
      });
    },
    //点击事件
    clickMenu() {
      if (this.menu.checked === true) {
        return;
      }
      this.menu.checked === !this.menu.checked;
      if (this.menu.children && this.menu.children.length > 0) {
        this.findFirstMenu(this.menu.children);
        console.log(2)
        this.$store.dispatch("updateOneTopMenu", this.menu);
        this.$router.push(JSON.parse(this.leftFirstMenu.route));
      }
    },
    // 查找第一个菜单
    findFirstMenu(data) {
      if (data) {
        data.find((item, index) => {
          if (item.children === null || item.children.length === 0) {
            this.leftFirstMenu = item;
            return item;
          } else {
            return this.findFirstMenu(item.children);
          }
        });
      }
    }
  },
  components: {}
};
</script>
<style scoped lang="scss">
.menu_active {
  padding: 10px 25px;
  line-height: normal;
  border-radius: 6px;
  color: white;
}

.menu_normal {
  padding: 10px 25px;
  line-height: normal;
  border-radius: 6px;
  color: black;
}
.menu_badge {
  /deep/.el-badge__content.is-fixed {
    border: none;
    right: 0px !important;
  }
}
</style>
